<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello React!</title>
    <!--注意导入顺序-->
    <script src="../bower_components/react/react.production.min.js"></script>
    <script src="../bower_components/react/react-dom.production.min.js"></script>
    <script src="./js/prop-types.js"></script>
    <!--将JSX语法 转换成javascript语法 -->
    <script src="../bower_components/babel/browser.min.js"></script>
    <script src="../bower_components/jquery/dist/jquery.js"></script>

    <link rel="stylesheet" href="../script/bootstrap-3.3.7.min.css">
</head>
<body>
<div id="example"></div>
<div id="example1"></div>
<script type="text/babel">
    // todo 通过父组件多次渲染 动态加载 li

    class Li extends React.Component {
        render() {
            return <li>{this.props.title}</li>
        }
    }

    class Ul1 extends React.Component {
        constructor(props) {
            super(props)
            this.state={arr1:[1,2,3],label:"this is label"}
            // todo 不要在这里使用 ref对象， React 没有准备好
        }
        componentDidMount() {
            console.log(this.ele)
        }

        jqel(){
            console.log(this.ele);
            console.log($(this.ele));
            let je = $(this.ele); // todo 转换为 jquery对象
            je.css('color',"#f40")

        }
        // todo ref 给DOM对象添加 react中的唯一名字，
        render() {

            return (
                <div>
                    <div  className="btn btn-default" onClick={this.jqel.bind(this)}>jquery添加颜色</div>
                    <p ref={el => {this.ele = el}}>{this.state.label}</p>
                </div>
            )
        }

    }
    ReactDOM.render(
        <Ul1/>,
        $("#example")[0] // 转换为原生JS对象
    )
</script>
</body>

</html>